<template>
    <div class="w-100% h-100%">
        <chart :cdata="cdata" :ratio="curRatio" />
    </div>
</template>

<script lang="ts" setup>
import {computed, onMounted, onUnmounted} from "vue";
import Chart from './chart';
import { useEchartSize } from '@/utils/utils';

const props = defineProps({
    value: {
        type: Number,
        default: 0.5
    }
})

const cdata = computed(() => {
    return props.value;
})

const { curRatio } = useEchartSize();

// let curRatio = ref(1);

// let timer = null;
// onMounted(() => {
//     // 初始化时候不设置延时，则不会出现闪屏得效果
//     resizeHandler()
//     window.addEventListener('resize', resizeChartSize)
// })
// onUnmounted(() => {
//     window.removeEventListener('resize', resizeChartSize)
// })
//
// const resizeChartSize = () => {
//     if (timer) {
//         clearTimeout(timer);
//     }
//     timer = setTimeout(() => {
//         resizeHandler()
//     }, 300)
// }
//
// const resizeHandler = () => {
//     let windowWidth = window.innerWidth;
//     let baseWidth = 11520
//     curRatio.value = windowWidth / baseWidth;
// }


</script>

<style lang="scss" scoped>

</style>
